/**
 * @file: 绑定门店
 * @author: Lengxx
 * @date: 2024-06-20
 */
<template>
  <BasicModal
  title="绑定门店"
  v-bind="$attrs"
  @register="register"
  @ok="onModalSubmit"
  :loading="bindLoading"
  >
    <Spin :spinning="loading">
      <Form 
      :model="formState"
      :labelCol="{ style: { width: '100px' } }"
      >
        <FormItem label="用户名" >
          <Input v-model:value="formState.username" disabled />
        </FormItem>
        <FormItem label="昵称" >
          <Input v-model:value="formState.nickname" disabled />
        </FormItem>
        <FormItem label="绑定门店" name="storeId" >
          <Select v-model:value="formState.storeId" placeholder="请选择门店">
            <SelectOption v-for="(item, index) in data" :key="index" :value="item.value" >{{ item.label }}</SelectOption>
          </Select>
        </FormItem>
      </Form>
    </Spin>
  </BasicModal>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { Spin, Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue'
import { getStoreOpts } from '@/api/permisson/store'
import { bindStoreWidthUser } from '@/api/user'
import { BasicModal, useModalInner } from '@/components/Modal'
import { useRequest } from '@vben/hooks'

const { loading, data, runAsync } = useRequest(getStoreOpts, { manual: true })
const { loading: bindLoading, runAsync: runBindStoreWidthUser } = useRequest(bindStoreWidthUser, { manual: true })

const emits = defineEmits(['submit'])

const formState = reactive({
  id: '',
  username: '',
  nickname: '',
  storeId: ''
});

const { resetFields } = Form.useForm(formState);

const [register, { closeModal }] = useModalInner(data => {
  runAsync();
  if (data) {
    resetFields();
    Object.assign(formState, data);
  }
})

/** 绑定角色提交 */
async function onModalSubmit() {
  const { id, storeId } = formState;
  if (id) {
    await runBindStoreWidthUser({ id, storeId });
    closeModal();
    emits('submit');
  }
}

</script>

